<template>
  <div class="media_celebrity">
    <div class="tab_list">
      <swiper :options="swiperTabNav" ref="swiperTabNav">
        <swiper-slide :class="navActive === 0?'item_nav_body active':'item_nav_body'">
          <a href="javascript:;" @click="getcelebrityleList(0, 0)">全部</a>
        </swiper-slide>
        <swiper-slide v-for="(item, index) in tabList" :key="item.termId + ' ' + index" :class="navActive === index+1?'item_nav_body active':'item_nav_body'">
          <a href="javascript:;" @click="getcelebrityleList(item.termId, index+1)">{{item.name}}</a>
        </swiper-slide>
      </swiper>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad">
        <a :href="'/media-personal?id='+item.userId" class="item_v2_index_news" v-for="(item, index) in celebrityleList" :key="item.userId+ '' +index">
          <div class="top_img">
            <div class="left_img_text">
              <img v-if="item.isV === 2" class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
              <img :src="item.avatar" alt="">
              <div class="name_text">
                <p>{{item.userNickName}}</p>
                <span>{{item.description}}</span>
              </div>
            </div>
          </div>
          <div class="text_body">
            <div class="right_text">
              <img class="video_img" :src="item.userImage ? item.userImage : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
            </div>
          </div>
        </a>
        <!--加载状态-->
        <van-skeleton
            title
            style="margin-top: 30px"
            avatar
            :row="4"
            :loading="loading">
        </van-skeleton>
      </van-list>
      <div v-if="footerShow" class="no_data_title">
        <p>没有内容了~</p>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
  name: 'media_celebrity',
  components: {},
  data () {
    return {
      swiperTabNav: { // 初始化菜单
        slidesPerView: '4',
        spaceBetween: 0
      },
      current: 1, // 当前页
      size: 5, // 每页条数
      articleId: 0, // 选择的地址
      navActive: 0,
      isLoading: false, // 下拉刷新
      showLoding: true, // loading效果
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      footerShow: false, // 底部标志显示
      celebrityleList: [], // 数据
      tabList: [] // 标签数据
    }
  },
  props: {},
  watch: {},
  methods: {
    /* wf_Huang 2019/9/16 0016 获取标签 */
    getTabList () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpterms/getUserTagList`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('大咖标签获取失败~')
          return false
        }
        this.tabList = res.data
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 18:00
     *@function  获取文章列表
     *****************************************/
    getcelebrityleList: debounce(function (id, index) {
      // 切换做当前页重置
      if (this.articleId !== id) {
        this.current = 1
        this.celebrityleList = []
        this.finished = false
      }
      this.articleId = id
      this.navActive = index
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpusers/getUserList?userTagId=${id}&current=${this.current}&size=${this.size}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('文章列表查询失败~')
          return false
        }
        if (res.data.length < this.size) {
          this.footerShow = true
          this.finished = true
        } else {
          this.footerShow = false
        }
        res.data.forEach(item => {
          this.celebrityleList.push(item)
        })
        this.loading = false
      }).catch(() => {})
    }, 100, { 'leading': true, 'trailing': false }),
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 18:00
     *@function  上拉刷新 加载
     *****************************************/
    onLoad: debounce(function () {
      this.getcelebrityleList(this.articleId, this.navActive)
      this.current = this.current + 1
    }, 100, { 'leading': true, 'trailing': false }),
    /*
     *@author wf_Huang
     *@Time 2019/8/18 0018 12:13
     *@function  下拉刷新
     *****************************************/
    onRefresh () {
      this.current = 1
      this.celebrityleList = []
      this.getcelebrityleList(0, 0)
      this.isLoading = false
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    Promise.all([
      this.getTabList()
    ]).then(() => {
      this.getcelebrityleList(0, 0)
    })
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .media_celebrity {
    .tab_list{
      padding: 0 31px 31px;
      .item_nav_body{
        padding: 0 10px;
        a{
          height:54px;
          background:rgba(240,240,240,1);
          border-radius:27px;
          font-size:26px;
          font-weight:400;
          color:rgba(102,102,102,1);
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .active{
        a{
          background-color: #027FFE;
          color: #ffffff;
        }
      }
    }
  }
</style>
